<template>
	<div class="table-container">
		<div
			v-for="(productItem, productIndex) in data || []"
			:key="productIndex"
			class="row-item"
		>
			<div
				v-for="(headerItem, headerIndex) in header"
				:key="headerIndex"
				class="col-item"
				:style="{
					width: headerItem.width === '100%' ? 'auto' : headerItem.width,
					flexGrow: headerItem.width === '100%' ? 1 : 0,
					justifyContent: setTextAlign(headerItem.align),
					flexShrink: headerItem.width === '100%' ? 1 : 0
				}"
			>
				<div v-if="headerItem.isSlot">
					<slot :name="headerItem.key" :row="productItem" :rowIndex="productIndex"></slot>
				</div>
				<span v-else>{{ productItem[headerItem.key] }}</span>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            header: {
                type: Array,
                default() {
                    return [];
                }
            },
            data: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        methods: {
            setTextAlign(align) {
                let alignStr = '';
                if (align) {
                    if (align === 'left') {
                        alignStr = 'flex-start';
                    } else if (align === 'right') {
                        alignStr = 'flex-end';
                    } else if (align === 'center') {
                        alignStr = 'center';
                    }
                } else {
                    alignStr = 'flex-start';
                }
                return alignStr;
            }
        }
    };
</script>
<style scoped lang="scss">
    .table-container {
        //border: solid 1px #e8eaec;
        .row-item {
            border-bottom: solid 1px #e8eaec;
            display: flex;
            align-items: center;
            height: 100%;
            .col-item {
                min-height: 38px;
                line-height: 22px;
                border-right: solid 1px #e8eaec;
                padding: 0 8px;
                box-sizing: border-box;
                overflow: hidden;
                //flex-shrink: 0;
                display: flex;
                align-items: center;
            }
        }
        .row-item .col-item:last-child {
            border-right: none;
        }
    }
    .table-container .row-item:last-child {
        border-bottom: none;
    }
</style>
